<template>
  <div>
    <!-- 头部返回 -->
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />

    <!-- 头像部分 -->
    <div class="avatar">
        <van-uploader :after-read="afterRead">
          <img :src="avatar" alt />
        </van-uploader>
        <p style="font-size:12px; margin:0;">点击图片更换头像</p>
      </div>

    <!-- 修改信息部分 -->
    <van-form @submit="onSubmit">
      <van-field
        style="margin-top:20px;"
        v-model="loginName"
        name="账号"
        label="账号"
        placeholder="请填写账号"
        :rules="[{ required: true, message: '请填写账号' }]"
      />
      <van-field
        v-model="userName"
        name="昵称"
        label="昵称"
        placeholder="请填写昵称"
        :rules="[{ required: true, message: '请填写昵称' }]"
      />
      <van-field
        v-model="phonenumber"
        type="tel"
        label="手机号"
        placeholder="请填写手机号"
        :rules="[{ required: true, message: '请填写手机号' }] "
      />
      <van-field
        v-model="email"
        type="email"
        name="邮箱"
        label="邮箱"
        placeholder="请填写邮箱"
        :rules="[{ required: true, message: '请填写邮箱号' }]"
      />
      <!-- <van-field
        v-model="password"
        type="password"
        name="新密码"
        label="新密码"
        placeholder="请填写新密码"
        :rules="[{ required: true, message: '请填写新密码' }]"
      /> -->
    
      <!-- 提交按钮 -->
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="update">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { changePersonalInfo, changeImg,checkInfo } from "../../api/forum-api.js";
export default {
  data() {
    return {
      phonenumber: "",
      password: "",
      loginName: "",
      userName: "",
      rules: {},
      email: "",
      avatar:"",
    };
  },
  created() {
    checkInfo().then(res=>{
      //console.log(res)
      this.avatar = res.data.avatar
    })
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    saveChange() {
      setTimeout(() => {
        this.$toast("保存成功");
      }, 500);
    },
    onSubmit(values) {
      //console.log("submit", values);
    },
    //修改个人信息
    update() {
      changePersonalInfo(
        this.loginName,
        this.userName,
        this.phonenumber,
        this.email,
        this.password
      ).then(res => {
        console.log(res);
      });
      // this.$toast("修改成功")
      // this.$router.push({
      //   path: "/personalData"
      // });
    },
    //修改头像
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      changeImg(file.file).then(res => {
        console.log(res);
      })
      .then(checkInfo)
      .then(res=>{
        this.avatar = res.data.avatar;
      })
    }
  }
};
</script>

<style lang="less" scoped>
/* 修改头像 */
.avatar {
  position: relative;
  margin: auto;
  margin-top: 8%;
  border-radius: 50%;
  width: 100px;
}
.avatar  img{
  object-fit: cover;
    object-position: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.my-avatar {
  width: 64px;
  margin: auto;
}
.my-file {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
}
.portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}


</style>